<template>
  <div class="main user-layout-register">
    <a-tabs
            :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
    >
      <!--
        v-decorator [name, rules]
      -->
      <a-tab-pane key="tab1" :tab="'用户注册'">
        <a-form ref="formRegister" :form="form" id="formRegister">
          <a-form-item>
            <a-input
                    size="large"
                    type="text"
                    :placeholder="'请输入账号'"
                    v-decorator="['username', {rules: [{ required: true, message: '账号是必填项！' }], validateTrigger: ['change', 'blur']}]"
            ></a-input>
          </a-form-item>

          <a-popover
                  placement="rightTop"
                  :trigger="['focus']"
                  :getPopupContainer="(trigger) => trigger.parentElement"
                  v-model="state.passwordLevelChecked">
            <template slot="content">
              <div :style="{ width: '240px' }">
                <div :class="['user-register', passwordLevelClass]">{{ $t(passwordLevelName) }}</div>
                <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor "/>
                <div style="margin-top: 10px;">
              <span>{{ $t('user.register.password.popover-message') }}
              </span>
                </div>
              </div>
            </template>
            <a-form-item>
              <a-input-password
                      size="large"
                      @click="handlePasswordInputClick"
                      :placeholder="'请输入密码'"
                      v-decorator="['password', {rules: [{ required: true, message: '密码是必填项！' }, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
              ></a-input-password>
            </a-form-item>
          </a-popover>

          <a-form-item>
            <a-input-password
                    size="large"
                    :placeholder="'请再次输入密码'"
                    v-decorator="['checkPassword', {rules: [{ required: true, message: '确认密码是必填项！' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
            ></a-input-password>
          </a-form-item>

          <a-form-item>
            <a-input
                    size="large"
                    type="text"
                    :placeholder="'请输入星球编号'"
                    v-decorator="['planetCode', {rules: [{ required: true, message: '星球编号是必填项！' }], validateTrigger: ['change', 'blur']}]"
            ></a-input>
          </a-form-item>

          <a-form-item>
            <a-button
                    size="large"
                    type="primary"
                    htmlType="submit"
                    class="register-button"
                    :loading="registerBtn"
                    @click.stop.prevent="handleSubmit"
                    :disabled="registerBtn">{{ $t('user.register.register') }}
            </a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import {getSmsCaptcha} from '@/api/login'
  import {deviceMixin} from '@/store/device-mixin'
  import {scorePassword, timeFix} from '@/utils/util'
  import {register} from "@/api/login";

  const levelNames = {
    0: 'user.password.strength.short',
    1: 'user.password.strength.low',
    2: 'user.password.strength.medium',
    3: 'user.password.strength.strong'
  }
  const levelClass = {
    0: 'error',
    1: 'error',
    2: 'warning',
    3: 'success'
  }
  const levelColor = {
    0: '#ff0000',
    1: '#ff0000',
    2: '#ff7e05',
    3: '#52c41a'
  }
  export default {
    name: 'Register',
    components: {},
    mixins: [deviceMixin],
    data() {
      return {
        form: this.$form.createForm(this),

        state: {
          time: 60,
          level: 0,
          smsSendBtn: false,
          passwordLevel: 0,
          passwordLevelChecked: false,
          percent: 10,
          progressColor: '#FF0000'
        },
        registerBtn: false
      }
    },
    computed: {
      passwordLevelClass() {
        return levelClass[this.state.passwordLevel]
      },
      passwordLevelName() {
        return levelNames[this.state.passwordLevel]
      },
      passwordLevelColor() {
        return levelColor[this.state.passwordLevel]
      }
    },
    methods: {
      handlePasswordLevel(rule, value, callback) {
        if (!value) {
          return callback()
        }
        console.log('scorePassword ; ', scorePassword(value))
        if (value.length >= 6) {
          if (scorePassword(value) >= 30) {
            this.state.level = 1
          }
          if (scorePassword(value) >= 60) {
            this.state.level = 2
          }
          if (scorePassword(value) >= 80) {
            this.state.level = 3
          }
        } else {
          this.state.level = 0
          callback(new Error(this.$t('user.password.strength.msg')))
        }
        this.state.passwordLevel = this.state.level
        this.state.percent = this.state.level * 33

        callback()
      },

      handlePasswordCheck(rule, value, callback) {
        const password = this.form.getFieldValue('password')
        // console.log('value', value)
        if (value === undefined) {
          callback(new Error(this.$t('user.password.required')))
        }
        if (value && password && value.trim() !== password.trim()) {
          callback(new Error(this.$t('user.password.twice.msg')))
        }
        callback()
      },

      handlePhoneCheck(rule, value, callback) {
        console.log('handlePhoneCheck, rule:', rule)
        console.log('handlePhoneCheck, value', value)
        console.log('handlePhoneCheck, callback', callback)

        callback()
      },

      handlePasswordInputClick() {
        if (!this.isMobile) {
          this.state.passwordLevelChecked = true
          return
        }
        this.state.passwordLevelChecked = false
      },

      handleSubmit() {
        const { form: { validateFields }, state, $router } = this
        validateFields({ force: true }, (err, values) => {
          if (!err) {
            state.passwordLevelChecked = false
            const obj = this.form.getFieldsValue()
            register(obj)
              .then(res => {
                this.$router.push({ path: '/' })
                // 延迟 1 秒显示欢迎信息
                setTimeout(() => {
                  this.$notification.success({
                    message: '成功',
                    description: `注册成功`
                  })
                }, 1000)
              })
              // .catch(err => {
              //   this.$notification['error']({
              //     message: '错误',
              //     description: err.description || err.message || '请求出现错误，请稍后再试',
              //     duration: 4
              //   })
              // })
          }
        })
      },

      getCaptcha(e) {
        e.preventDefault()
        const { form: { validateFields }, state, $message, $notification } = this

        validateFields(['mobile'], { force: true },
          (err, values) => {
            if (!err) {
              state.smsSendBtn = true

              const interval = window.setInterval(() => {
                if (state.time-- <= 0) {
                  state.time = 60
                  state.smsSendBtn = false
                  window.clearInterval(interval)
                }
              }, 1000)

              const hide = $message.loading('验证码发送中..', 0)

              getSmsCaptcha({ mobile: values.mobile }).then(res => {
                setTimeout(hide, 2500)
                $notification['success']({
                  message: '提示',
                  description: '验证码获取成功，您的验证码为：' + res.result.captcha,
                  duration: 8
                })
              }).catch(err => {
                setTimeout(hide, 1)
                clearInterval(interval)
                state.time = 60
                state.smsSendBtn = false
                this.requestFailed(err)
              })
            }
          }
        )
      },
      requestFailed(err) {
        this.$notification['error']({
          message: '错误',
          description: err || '请求出现错误，请稍后再试',
          duration: 4
        })
        this.registerBtn = false
      }
    },
    watch: {
      'state.passwordLevel'(val) {
        console.log(val)
      }
    }
  }
</script>
<style lang="less">
  .user-register {

    &.error {
      color: #ff0000;
    }

    &.warning {
      color: #ff7e05;
    }

    &.success {
      color: #52c41a;
    }

  }

  .user-layout-register {
    .ant-input-group-addon:first-child {
      background-color: #fff;
    }
  }
</style>
<style lang="less" scoped>
  .user-layout-register {

    & > h3 {
      font-size: 16px;
      margin-bottom: 20px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .register-button {
      width: 100%;
    }

    .login {
      float: right;
      line-height: 40px;
    }
  }
</style>
